<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form>div{
            width: 300px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        form input{
            width: 200px;
            height: 20px;
            outline: none;
        }
        .text{
            letter-spacing: 2em;
        }
        .ps-box{
            display: flex;
        }
        .ps-box .ps{
            width: 200px;
            border: 1px solid black;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
        .ps-box .ps input{
            border: none;
        }
        .ps-box .ps img{
            width: 20px;
            height: 20px;
        }
        textarea{
            width: 300px;
            resize: none;
            
        }
    </style>
</head>
<body>
    <form action="">
        <div>
            <span class="text">姓名</span> <input type="text" id="userName" required> <span class="judgment"></span>
        </div>
        <div class="ps-box">
            <span class="text">密码</span> 
            <div class="ps">
                <input type="password" id="password" required>
                <img src="./眼睛_隐藏_o.png" alt="" class="eye">
            </div>
            <span class="judgment"></span>
        </div>
        <div class="ps-box">
            <span>确认密码</span> 
            <div class="ps">
                <input type="password" id="password2" required>
                <img src="./眼睛_隐藏_o.png" alt="" class="eye">
            </div>
            <span class="judgment"></span>
        </div>
        <div>
            <span class="text">生日</span>
            <input type="date" required>
        </div>
        <div>
            <span>电话号码</span>
            <input type="tel" id="tel" required>
            <span class="judgment"></span>
        </div>
        <div>
            <span>家庭地址</span>
            <div>
                <select name="" id="province" required>
                    <option value="">请选择省份</option>
                </select>
                <select name="" id="city" required>
                    <option value="">请选择市</option>
            
                </select>
                <select name="" id="area" required>
                    <option value="">请选择区、县</option>
            
                </select>
            </div>
            

        </div>
        <textarea name="" id="place" cols="30" rows="10" required></textarea>
        <span class="judgment"></span>



        <div>
            <input type="submit">

        </div>

    </form>

    <script src="./三级联动.js"></script>
    <script>

        let form=document.getElementsByTagName("form")[0];
        let userName=document.getElementById("userName");
        let judgment=document.getElementsByClassName("judgment");
        let password=document.getElementById("password");
        let password2=document.getElementById("password2");
        let tel=document.getElementById("tel");
        let province=document.getElementById("province");
        let city=document.getElementById("city");
        let area=document.getElementById("area");
        let place=document.getElementById("place");


        userName.onfocus=function(){
            userName.placeholder="用户名必须是字母开头，长度6-10位";
        }
        userName.onblur=function(){
            userName.placeholder="";
            // 判断用户输入的内容是否符合要求
            let word=userName.value;
            let reg=/^[a-z][\d\D]{5,9}$/i;
            if(reg.test(word)){
                judgment[0].innerText="√";
                judgment[0].style.color="green";

            }else{
                judgment[0].innerText="X";
                judgment[0].style.color="red";
            }
        }

        password.onfocus=function(){
            password.placeholder="密码长度是6位数字";
        }
        password.onblur=function(){
            password.placeholder="";
            // 判断用户输入的内容是否符合要求
            let word=password.value;
            let reg=/^\d{6}$/i;
            if(reg.test(word)){
                judgment[1].innerText="√";
                judgment[1].style.color="green";

            }else{
                judgment[1].innerText="X";
                judgment[1].style.color="red";
            }

        }
        password2.onfocus=function(){
            password2.placeholder="密码一致";
        }
        password2.onblur=function(){
            password2.placeholder="";
            // 判断用户输入的内容是否和之前输入的一致
            let word=password2.value;
            if(word===password.value){
                judgment[2].innerText="√";
                judgment[2].style.color="green";

            }else{
                judgment[2].innerText="X";
                judgment[2].style.color="red";
            }

        }

        tel.onfocus=function(){
            tel.placeholder="请输入电话号码";
        }
        tel.onblur=function(){
            tel.placeholder="";
            // 判断用户输入的内容是否符合要求
            let word=tel.value;
            let reg=/^1[3456789]\d{9}$/;
            if(reg.test(word)){
                judgment[3].innerText="√";
                judgment[3].style.color="green";

            }else{
                judgment[3].innerText="X";
                judgment[3].style.color="red";
            }
        }

        form.onclick=function(){
            if(event.target.className==="eye"){
                console.log(123);
                console.log(event.target.previousElementSibling.type);
                if(event.target.previousElementSibling.type==="password"){
                    event.target.src=`./眼睛_显示_o.png`;
                    event.target.previousElementSibling.type="text";

                }else{
                    event.target.src=`./眼睛_隐藏_o.png`;
                    event.target.previousElementSibling.type="password";

                }

            }
        }

        threeStage(province,city,area,cities);
        place.onblur=function(){
            if(place.value.length<=4){
                judgment[4].innerText="请确定输入的地址正确";
                judgment[4].style.color="red";

            }else{
                judgment[4].innerText="√";
                judgment[4].style.color="transparent";
            }
        }


        // 在提交所有内容之前，需要确保所有内容都是符合格式要求的
        form.onsubmit=function(){
            let flag=true;//开关，true表示提交成功
            for(let i=0;i<judgment.length;i++){
                if(judgment[i].innerText!="√"){
                    flag=false
                }
            }
            if(flag){
                alert("提交成功！");
            }else{
                alert("提交失败")
            }

        }



    </script>
</body>
</html>